<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1986880_2c14z3sp81o.css">
    <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>律师列表</title>
    <style>
        .area-box{
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            margin: 20px 0;
            padding: 0 20px;
        }
        .area-box .left{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .area-list{
            width: 100%;
            padding: 20px 0 0;
            overflow: hidden;
            border-bottom: 1px solid #E2E2E2;
        }
        .area-list:last-child{
            border-bottom: 0;
        }
        .area-list .right-list{
            width: 1080px;
            height: auto;
        }
        .area-list .right-list .list{
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .area-list .right-list  .item{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            margin-right: 40px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        .area-list .right-list  .item.active{
            color: #4C9AFE;
        }
        .area-list .hot-area{
            width: 970px;
            height: auto;
            overflow: hidden;
            background: #E1F6FF;
            border-radius: 5px;
            padding: 15px 19px 0;
            margin-bottom: 20px;
        }
        .area-list .hot-area .item{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
            margin-right: 30px;
            margin-bottom: 13px;
            cursor: pointer;
        }
        /* 排序 */
        .sort-box{
            width: 1202px;
            height: auto;
            overflow: hidden;
            background: #FFFFFF;
            border-radius: 5px;
            padding: 20px 19px;
            margin-bottom: 20px;
        }
        .sort-box .right{
            width: 410px;
            height: 40px;
            background: #FFFFFF;
            border: 1px solid #4C9AFE;
            border-radius: 20px;
            overflow: hidden;
        }
        .sort-box .right .btn{
            width: 95px;
            height: 40px;
            background: #4C9AFE;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            position: relative;
            left: 2px;
            cursor: pointer;
        }
        .sort-box .right .btn .iconfont{
            font-size: 14px;
            color: #FFFFFF;
        }
        .sort-box .right .btn span{
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: #FFFFFF;
        }
        .sort-box .ipt{
            width: 305px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
        }
        .sort-box .sort-item{
            padding: 13px 0;
            display: inline-block;
            margin-right: 38px;
        }
        .sort-box .sort-item span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #999999;
        }
        .sort-box .sort-item  .iconfont{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .sort-box .sort-item.active span{
            color: #4C9AFE;
        }
        .sort-box .sort-item.active .iconfont{
            color: #4C9AFE;
        }
        .lawyer-list{
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        .lawyer-list .item{
            width: 1202px;
            height: auto;
            background: #FFFFFF;
            border-radius: 5px;
            padding: 20px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .lawyer-list .item .heading{
            width: 180px;
            height: 180px;
            background: #BBD3DD;
            border-radius: 5px;
        }
        .lawyer-list .item .eval{
            width: 265px;
            height: 155px;
            background: #F5F5F5;
            border-radius: 5px;
            margin-top:13px;
            padding: 19px;
        }
        .lawyer-list .item .eval .eval-title{
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 13px;
        }
        .lawyer-list .item .eval .help-center{
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 13px;
        }
        .lawyer-list .item .eval .iconfont{
            font-size: 14px;
            color: #419C4B;
            font-weight: bold;
        }
        .lawyer-list .item .middle{
            width: 700px;
            height: auto;
            padding: 0 20px;
        }
        .lawyer-list .item .middle .name-info{
            width: 100%;
            overflow: hidden;
            margin-top: 20px;
        }
        .lawyer-list .item .middle .name-info .name{
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222222;
        }
        .lawyer-list .item .middle .name-info .tag{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #222222;
            position: relative;
            top: 5px;
            left: 8px;
        }
        .lawyer-list .item .middle .name-info .btn-b{
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #E1EEFF;
            border: 1px solid #4C9AFE;
            border-radius: 15px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
            margin-left: 18px;
            cursor: pointer;
        }
        .lawyer-list .item .middle .name-info .btn-a{
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #E1EEFF;
            border: 1px solid #4C9AFE;
            border-radius: 15px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
            margin-left: 18px;
            cursor: pointer;
        }
        .lawyer-list .item .address{
            width: 100%;
            overflow: hidden;
            margin-bottom: 15px;
            text-align: left;
        }
        .lawyer-list .item .address .iconFrame1{
            font-size: 16px;
            color: #FD990A;
        }
        .lawyer-list .item .address .iconxunzhang{
            color: #E54164;
        }
        .lawyer-list .item .address .iconneirong{
            color: #4C9AFE;
        }
        .lawyer-list .item .address  span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .lawyer-list .item .nums-info{
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .lawyer-list .item .nums-item{
            width: auto;
            height: 22px;
            padding: 0 10px;
            line-height: 22px;
            background: #F5F5F5;
            border-radius: 5px;
            margin-right: 40px;
        }
        .lawyer-list .item .nums-item .iconfont{
            font-size: 14px;
            color: #78A1BA;
        }
        .lawyer-list .item .nums-item span{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #78A1BA;
        }
        .lawyer-list .item .nums-item span.num{
            font-weight: bold;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="header">
            <div class="wrapper">
                <div class="row topmenus">
                    <div class="col header-address fl">
                        <i class="iconfont icondingweiweizhi"></i>
                        <span class="txt">郑州</span>
                        <i class="iconfont icondown-hollow"></i>
                    </div>
                    <div class="col header-menuns fr">
                        <a href="" class="txt fr">手机APP</a>
                        <a href="" class="txt fr">律师入驻</a>
                        <a href="" class="notice fr">
                            <i class="iconfont icontongzhi"></i>
                            <div class="cirle"></div>
                        </a>
                        <div class="lg fr txt">
                            欢迎，请
                            <a href="https:www.baidu.com" class="login">登录</a>
                            ｜ <a href='' class='resign'>免费注册</a>
                        </div>
                    </div>
                </div>
                <div class="header-middle">
                    <img class="logo fl" src="../../images/lawyer.png" alt="">
                    <div class="downs fr">
                        <div class="down-url fl">
                            <img class="down-pic" src="../../images/lawyer.png" alt="">
                            <div class="txt">安卓</div>
                        </div>
                        <div class="down-url fl">
                            <img class="down-pic" src="../../images/lawyer.png" alt="">
                            <div class="txt">苹果</div>
                        </div>
                    </div>
                    <div class="search fr">
                        <div class="ipt-search fl">
                            <input class="ipt" type="text" placeholder="请输入您想要搜索的内容">
                            <i class="iconfont iconsousuo"></i>
                        </div>
                        <div class="btn-search fl">
                            <i class="iconfont iconbianji"></i>
                            <span>提问</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="menus">
                        <a class="item fl">
                            <span>法律咨询</span>
                            <i class="iconfont iconf11"></i>
                        </a>
                        <a class="item fl">
                            <span>找律师</span>
                            <i class="iconfont iconf11"></i>
                        </a>
                        <a class="item fl">
                            <span>律师说法</span>
                            <i class="iconfont iconf11"></i>
                        </a>
                        <a href='' class="item fl">
                            <span>律师问答</span>
                        </a>
                        <a href='' class="item fl">
                            <span>合同下载</span>
                        </a>
                        <a href='' class="item fl">
                            <span>法律知识</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="wrapper">
                <div class="area-box">
                    <div class="area-list">
                        <div class="left fl">服务地区：</div>
                        <div class="right-list fr">
                            <div class="list">
                                <div class="item active fl">全部</div>
                                <div class="item fl">宁波</div>
                                <div class="item fl">北京</div>
                                <div class="item fl">北京</div>
                            </div>
                            <div class="hot-area">
                                <div class="item fl">郑州</div>
                                <div class="item fl">三门峡</div>
                                <div class="item fl">周口</div>
                            </div>
                        </div>
                    </div>
                    <div class="area-list">
                        <div class="left fl" >擅长领域：</div>
                        <div class="right-list fr">
                            <div class="item active fl">不限</div>
                            <div class="item fl">房屋土地</div>
                            <div class="item fl">北京</div>
                            <div class="item fl">北京</div>
                        </div>
                    </div>
                    <div class="area-list">
                        <div class="left fl">服务类型：</div>
                        <div class="right-list fr">
                            <div class="item fl active">不限</div>
                            <div class="item fl">语音咨询</div>
                            <div class="item fl">北京</div>
                            <div class="item fl">北京</div>
                        </div>
                    </div>
                </div>
                <div class="sort-box">
                    <div class="left fl">
                        <div class="sort-item active">
                            <span>综合排序</span>
                            <i class="iconfont iconup"></i>
                        </div>
                        <div class="sort-item">
                            <span>好评数排序</span>
                            <i class="iconfont iconup"></i>
                        </div>
                        <div class="sort-item">
                            <span>回答数排序</span>
                            <i class="iconfont iconup"></i>
                        </div>
                    </div>
                    <div class="right fr">
                        <input type="text" class="ipt fl" placeholder="请输入律师姓名">
                        <div class="btn fr">
                            <i class="iconfont iconsousuo"></i>
                            <span>搜索</span>
                        </div>
                    </div>
                </div>
                <div class="lawyer-list">
                    <div class="item">
                        <img src="../../images/lawyer.png" class="heading fl">
                        <div class="middle fl">
                            <div class="name-info">
                                <div class="name fl">刘美</div>
                                <div class="tag fl">主办律师</div>
                                <div class="btn-b fr">找TA服务</div>
                                <div class="btn-a fr">给TA留言</div>
                            </div>
                            <div class="address">
                                <i class="iconfont iconFrame1"></i>
                                <span>河南郑州锦天城律师事务所</span>
                            </div>
                            <div class="address">
                                <i class="iconfont iconxunzhang"></i>
                                <span>建筑工程，离婚，债务债权，合同纠纷，公司法，刑事</span>
                            </div>
                            <div class="address">
                                <i class="iconfont iconneirong"></i>
                                <span>鲁巧律师，专注于婚姻家庭类纠纷的专业律师团队负责人。现任河南鑫苑律师事务所婚姻处理机构</span>
                            </div>
                            <div class="nums-info">
                                <div class="nums-item fl">
                                    <i class="iconfont iconpingjia"></i>
                                    <span>解答咨询<span class="num">262</span>个</span>
                                </div>
                                <div class="nums-item fl">
                                    <i class="iconfont iconhuifu"></i>
                                    <span>好评数<span class="num">26</span>个</span>
                                </div>
                                <div class="nums-item fl">
                                    <i class="iconfont iconzan"></i>
                                    <span>点赞数<span class="num">26</span>个</span>
                                </div>
                            </div>
                        </div>
                        <div class="eval fr">
                            <div class="eval-title">客户评价</div>
                            <div class="help-center">已帮助：23337人</div>
                            <div class="help-center">好评：37人</div>
                            <div class="help-center"><i class="iconfont icondadianhua"></i>15839885486</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-main">
                <div class="wrapper">
                    <div class="menus">
                        <a class="item fl" href="">关于我们</a>
                        <a class="item fl" href="">通知公告</a>
                        <a class="item fl" href="">意见反馈</a>
                        <div class="item fl">客服邮箱：KeFu12455@qq.com</div>
                        <a class="item fl">客服电话：400-902-9980</a>
                    </div>
                    <div class="downs">
                        <div class="item fl">
                            <div class="title">公众服务</div>
                            <div class="links">
                                <div class="link-url fl">
                                    <a class="link-url-item" href="">找律师</a>
                                    <a class="link-url-item" href="">问律师</a>
                                    <a class="link-url-item" href="">学法规</a>
                                    <a class="link-url-item" href="">合同下载</a>
                                </div>
                                <div class="link-codes fl">
                                    <img class="codes fl" src="../../images/lawyer.png" alt="">
                                    <div class="codes-info fl">
                                        <div class="info-a">用户APP下载地址</div>
                                        <div class="info-b">快速找律师/在线咨询</div>
                                        <div class="info-c">差法律知识/查看解答/随时追问</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item fr">
                            <div class="title">律师服务</div>
                            <div class="links">
                                <div class="link-url fl">
                                    <a class="link-url-item" href="">律师加盟</a>
                                    <a class="link-url-item" href="">律师营销</a>
                                    <a class="link-url-item" href="">在线接单</a>
                                    <a class="link-url-item" href="">多人协作</a>
                                </div>
                                <div class="link-codes fl">
                                    <img class="codes fl" src="../../images/lawyer.png" alt="">
                                    <div class="codes-info fl">
                                        <div class="info-a">律师APP下载地址</div>
                                        <div class="info-b">营销分析/回复咨询</div>
                                        <div class="info-c">案件洽谈/异地协查</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-beian">
                <div class="wrapper">
                    律师网版权所有 20205-2020 粤ICP备10231287号-5 粤公安网安备 44010602222号 增值电信业务经营许可证(ICP)粤B2-20100586
                </div>
            </div>
        </div>
    </div>
</body>

</html>